@import '_var.scss';
*{
    font-family: 'ktfont';
}
.container{
    @include index-wh;
    background: url(../images/bg-question.png) no-repeat;
    background-size: contain;
    position: relative;
    overflow: hidden;
    .logo{
        @include wh(1.03rem,.38rem);
        background: url(../images/logo.png) no-repeat;
        background-size: contain;
        @include position($t:.45rem,$l:.45rem);
    }
    .portrait-lg{
        @include wh(1.75rem,1.75rem);
        background-color: #fff;
        margin: 0 auto;
        margin-top: 1.16rem;
        position: relative;
        border-radius: 50%;
        margin-bottom: .4rem;
        img{
            display: block;
            @include wh(1.41rem,1.29rem);
            @include v-center;
        }
    }
    .title{
        background-color: #75b9ff;
        @include wh(3.97rem,.44rem);
        border-radius: .1rem;
        font-size: .2754rem;
        line-height: .44rem;
        color: #fff;
        margin: 0 auto;
        margin-bottom: .12rem;
        padding-left: .15rem;
        position: relative;
        &::before{
            @include sanjiao($w:.1rem,$bc:#75b9ff);
            @include center;
            top: -.2rem;
        }
    }
    .num{
        @include wh(2.67rem,.3rem);
        font-size: .2065rem;
        color: #fff;
        margin: 0 auto;
        margin-bottom: .44rem;
        span{
            font-size: .3442rem;
        }
    }
    .comment{
        @include wh($w:4.7rem);
        margin: 0 auto;
        @for $i from 1 to 4 {
            .com#{$i}{
                height: .6rem;
                margin-bottom: .35rem;
                .sdog{
                    @include wh(.6rem,.6rem);
                    border-radius: 50%;
                    background-color: #fff;
                    margin-right: .15rem;
                    position: relative;
                    img{
                        @include wh(.4rem,.4rem);
                        @include v-center;
                    }
                }
                .pingjia{
                    @include wh($w:3.94rem-.15rem,$h:.25rem);
                    background-color: #f346f3;
                    padding: .1rem 0 .1rem 0.15rem;
                    border-radius: .07rem;
                    margin-top: .1rem;
                    position: relative;
                    color: #fff;
                    font-size: .2754rem;
                    line-height: .25rem;
                    &::before{
                        @include sanjiao($w:.04rem,$rc:#f346f3);
                        @include position($t:.18rem,$l:-.08rem);
                    }
                }
            }
        }
    }
    .foot{
        @include wh(100%,.7rem);
        @include position($b:0);
        background-color: #2c2c2c;
        .contain{
            background-color: #2c2c2c;
            @include wh(6rem,.3rem);
            margin: 0 auto;
            .content{
                margin-top: .2rem;
                margin-right: .25rem;
                font-size: .2447rem;
                color: #fff;
            }
            span{
                margin-top: .1rem;
                font-size: .2641rem;
                line-height: .3rem;
                padding: .1rem .14rem;
                border-radius: .1rem;
                background-color: #deff00;
            }
            a{
                margin-top: .2rem;
                display: block;
                @include wh(.36rem,.28rem);
                img{
                    @include wh(.36rem,.28rem);
                }
            }
        }
    }
}
